<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chinamap_neighbors</title>
    <script type="text/javascript" src="../lib/d3.js"></script>
    <script type="text/javascript" src="../lib/topojson.js"></script>
</head>
<body>
<script type="text/javascript">
    var width = 1000, height = 1000;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("tranform", "translate(0,0)");

    var projection = d3.geo.mercator()
        .center([107, 31])
        .scale(850)   //等下修改数值看看啥用的
        .translate([width / 2, height / 2]);

    var path = d3.geo.path().projection(projection);

    d3.json("../geojson/china.topojson",function(error,toporoot){

        //通过topojson.neighbors计算所有省份的相邻省份，保存在数组neighbors里
        //数组neighbors保存有各省份的邻省序号
        var neighbors = topojson.neighbors(toporoot.objects.china.geometries);
        var georoot = topojson.feature(toporoot,toporoot.objects.china);

        paths = svg.selectAll("path")
            .data(georoot.features)
            .enter()
            .append("path")
            .style("fill",function(d,i){
                     return "#ccc";
                 })
            .attr("class","province")
            .attr("d",path);

        console.log(paths);
        svg.selectAll("path").each(function (d,i) {
            //为每一个元素添加相邻省份的选择集
            d.neighbors = d3.selectAll(
                neighbors[i].map(function(j){  //使用map方法通过序号返回邻省的path对象
                    return paths[0][j];
                })
            );
        }).on("mouseover",function (d,i) {
            //鼠标移入后，变色
            d3.select(this).style("fill","red");
            d.neighbors.style("fill","steelblue");
        }).on("mouseout",function(d,i){
            //鼠标移出后，恢复原来的颜色
            d3.select(this).style("fill","#ccc");
            d.neighbors.style("fill","#ccc");
        });




    });
</script>
</body>
</html>